/**
 * 有类似ripple效果的modal
 * 更改为具有演示功能的modal，适用于一些特殊的场合
 */
import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Modal,
  Animated,
  Dimensions,
  Easing,
} from 'react-native';
import TimerEnhance from 'react-native-smart-timer-enhance';

const SCREEN_SIZE = Dimensions.get('window');

@TimerEnhance
class RippleModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      wrapperOpacity: new Animated.Value(0),
      wrapperScale: new Animated.Value(0.6),
      wrapperBorderRadius: new Animated.Value((SCREEN_SIZE.width - 10) / 4),
    };
  }

  // 关闭modal
  // next在关闭之后调用
  close = (next) => {
    Animated.parallel([
      Animated.timing(this.state.wrapperOpacity, {
        duration: 400,
        toValue: 0,
      }),
      Animated.timing(this.state.wrapperScale, {
        duration: 400,
        toValue: 1.2,
      }),
      Animated.timing(this.state.wrapperBorderRadius, {
        duration: 400,
        toValue: (SCREEN_SIZE.width - 10) / 4,
      }),
    ]).start(() => this.setState({ visible: false }, () => {
      this.state.wrapperScale.setValue(0.6);
      typeof next === 'function' && next();
    }));
  };

  // 打开modal
  // 演示功能的场景
  open = (next, delay, before) => {
    if (delay) {
      this.setState({ visible: true }, () => {
        typeof before === 'function' && before();
        this.setTimeout(() => {
          Animated.parallel([
            Animated.timing(this.state.wrapperOpacity, {
              duration: 400,
              toValue: 0.9,
            }),
            Animated.timing(this.state.wrapperScale, {
              duration: 400,
              toValue: 1,
              easing: Easing.elastic(1),
            }),
            Animated.timing(this.state.wrapperBorderRadius, {
              duration: 400,
              toValue: 0,
            }),
          ]).start(() => {
            typeof next === 'function' && next();
          });
        }, delay);
      });
    } else {
      this.setState({ visible: true }, () => {
        Animated.parallel([
          Animated.timing(this.state.wrapperOpacity, {
            duration: 400,
            toValue: 0.9,
          }),
          Animated.timing(this.state.wrapperScale, {
            duration: 400,
            toValue: 1,
            easing: Easing.elastic(1),
          }),
          Animated.timing(this.state.wrapperBorderRadius, {
            duration: 400,
            toValue: 0,
          }),
        ]).start(() => {
          typeof next === 'function' && next();
        });
      });
    }
  };

  render() {
    const {
      wrapperOpacity,
      wrapperScale,
      wrapperBorderRadius,
      visible,
    } = this.state;
    const {
      children,
      style,
    } = this.props;
    return (
      <Modal
        animationType="none" // 动画搭配fade可以由比较好的过渡效果
        transparent
        visible={visible}
        onRequestClose={this.close}>
        <Animated.View
          style={[
            styles.container,
            style,
            {
              opacity: wrapperOpacity,
              transform: [{ scale: wrapperScale }],
              borderRadius: wrapperBorderRadius,
            },
          ]}>
          {children}
        </Animated.View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default RippleModal;
